<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>

    <div class="container">
      <!-- <ul class="list">
        <li class="db" @click="path_url('/information/list?type=' + item.key)" v-for="(item,k) in datalist" :key="k">
          <div class="ico rel">
            <span v-if="item.unreadCount" class="abs">{{item.unreadCount}}</span>
            <img :src="item.icon" alt="">
          </div>
          <div class="flexs">
            <div class="n">{{ item.type }}</div>
            <p class="n text-overflow">{{ item.content }}</p>
          </div>
          <div class="str">
            <div class="time">{{item.date}}</div>
            <div class="static" v-if="item.unreadCount > 0"></div>
          </div>
        </li>
      </ul> -->

      <ul class="list">
        <li class="wrap bet mflex items-center" @click="path_url('/information/list?type=' + item.key)"
          v-for="(item, k) in datalist" :key="k">
          <img src="@/assets/images/my/notice.png" alt="">
          <div>
            <div class="title">
              <div class="pic">
                <!--              <img :src="item.icon" alt="">-->
                <div class="name">{{ item.type }}</div>
              </div>
              <div class="time">{{ item.date }}</div>
            </div>
            <div class="dot" v-if="item.unreadCount > 0"></div>
          </div>
        </li>
      </ul>

    </div>
  </div>
</template>
<script>

export default {

  data() {
    return {
      title: this.$t('title.doc35'),
      datalist: []
    };
  },

  mounted() {
    this.getinfo()
  },
  methods: {
    getinfo() {
      this.$post(this.URL.member.message_type, {}).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data.list
        } else {
          this.$toast(res.message);
        }
      });
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>


<style lang="less" scoped>
.mflex {
  justify-content: flex-start;

  img {
    width: 32px;
    margin-right: 12px;
  }
}

/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}

/deep/ .container {
  padding: 0 0.3rem;
}

.home {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat top center fixed;
  background-size: 100% 100%;
  min-height: 100vh;
  padding-bottom: 60px;
}

.list {
  margin-top: .32rem;
  padding: .12rem 0.32rem;
  background: #231417;
  border-radius: 12px;
  margin-bottom: 0.2rem;
  background: url("../../assets/images/noticeBg.png") no-repeat;
  background-size: 100% 100%;

  li {
    border-bottom: var(--COborder3);
    padding: .28rem 0rem .26rem 0rem;
    font-size: .26rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.90);
    line-height: .36rem;
    position: relative;


    .title {
      .pic {
        margin-bottom: 8px;
        display: flex;
        align-items: center;

        img {
          margin-right: .16rem;
          height: .48rem;
        }

        .name {
          font-size: .32rem;
          font-weight: 500;
          color: var(--COcolor3);
          padding-right: .2rem;
        }
      }

      .time {
        color: var(--COcolor1);
      }
    }

    .dot {
      position: absolute;
      top: .4rem;
      right: 0;
      width: .16rem;
      height: .16rem;
      background: #E72A2A;
      border-radius: 50%;
    }

    &:last-child {
      border: 0;
    }
  }
}

// .list {
//   padding-top: .2rem;
//   li {
//     position: relative;
//     padding-bottom: .32rem;
//     margin-bottom: .32rem;
//     &:after {
//       content:'';
//       display: block;
//       width: 100%;
//       position: absolute;
//       bottom:0;left:1.24rem;
//       background: #202020;height: .02rem;
//     }
//     &:last-child {
//       &:after {
//         display: none;
//       }
//     }
//     .ico {
//       width: .92rem;
//       margin-right: .32rem;
//       img {
//         height: .92rem;
//         width: 100%;
//         border-radius: 50%;
//       }
//       span {
//         display: block;
//         background: #F44343;
//         color: #fff;
//         padding: .02rem .04rem;
//         right: -.06rem;
//         top:-.06rem;
//         font-size: .2rem;
//         min-width: .3rem;height: .3rem;border-radius: .15rem;
//         line-height: .26rem;
//         text-align: center;
//       }
//     }
//     .n {
//       font-size: .3rem;
//       font-weight: 400;
//       color: rgba(255,255,255,0.90);
//       line-height: .42rem;
//       margin-bottom: .16rem;
//     }
//     p {
//       font-size: .26rem;
//       font-weight: 400;
//       color: rgba(255,255,255,0.50);
//       line-height: .36rem;
//     }
//     .time {
//       font-size: .24rem;
//       font-weight: 500;
//       color: rgba(255,255,255,0.50);
//       line-height: .34rem;
//       margin-bottom: .34rem;
//     }
//     .static {
//       width: .18rem;
//       height: .18rem;
//       background: #F44343;
//       border-radius: 50%;
//       float: right;
//     }
//   }
// }</style>
